<template>
  <component
    :is="componentName"
    :title="title"
    v-model="drawer"
    :append-to-body="append"
    v-bind="componentName == 'el-dialog' ? {width:width || size}:{size:size || width}"
    :show-close="showClose"
    :before-close="closeHandler"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    >
      <div class="drawerDteail">
        <slot/>
      </div>
      <div class="buttonGroup" v-if="isShowBuutton">
          <slot name="footer">
            <el-button @click="confrim" :loading="confirmLoading" type="primary" style="margin-right:16px">{{confirmLabel}}</el-button>
            <el-button @click="cancel">{{cancelLabel}}</el-button>
          </slot>
      </div>
  </component>
</template>
<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: "JimuDrawer",
  data () {
    return {
      drawer:false,
      confirmLoading:false
    };
  },
  watch:{
    modelValue(value:boolean){
      this.drawer = value
    }
  },
  props:{
    "componentName":{
      type:String,
      default:"el-drawer"
    },
    'before-close':{
      type:Function,
      // default:()=>{}
    },
    modelValue: Boolean,
    visible:{
      type:Boolean,
      default:false
    },
    isShowBuutton:{
      type:Boolean,
      default:true
    },
    append:{
      type:Boolean,
      default:false
    },
    width:{
      type:String,
      default:"400px"
    },
    size:{
      type:String,
      default:"400px"
    },
    title:String,
    confirmLabel:{
      type:String,
      default:"确定"
    },
    cancelLabel:{
      type:String,
      default:"取消"
    },
    showClose:{
      type:Boolean
    },

  },
  emits: ['update:modelValue', 'confirm', 'cancel'],
  mounted(){
    this.drawer = this.modelValue;
  },
  methods:{
    closeHandler(){
      this["before-close"] && this["before-close"]();
      this.$emit("update:modelValue",false);
      this.drawer = false
    },
    confrim(){
      this.confirmLoading = true
      this.$emit("confirm",{
        success:()=>{
          this.confirmLoading = false
          this.closeHandler()
        },
        error:()=>{
          this.confirmLoading = false
        }
      })
    },
    cancel(){
      this.$emit("cancel")
      this.closeHandler()
    },
    show(){
      this.drawer = true
    },
    close(){
      this.closeHandler()
    },
  }
})
</script>

<style lang="scss" scoped>
@import "../../../assets/css/config.scss";
// .drawerInner{
//   height: 100%;
:deep(.el-drawer__body){
  overflow: auto;
}
:deep(.el-dialog__body){
  padding: 0;
}

:deep(.el-drawer__body){
  display: flex;
  flex-direction: column;
  height: 100%;
}
  .drawerDteail{
    overflow: auto;
    padding: 0 20px;
    height:calc(100vh - 123px);
    // margin-bottom: 50px;
  }
  .buttonGroup{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }
// }
%line40 {
  line-height: 40px;
  height: 40px;
}
%pad020 {
  padding: 0 20px;
}
:deep(.el-dialog){
  .el-dialog__header {
    background: $bodyBg;
    @extend %pad020;
    text-align: center;
    .el-dialog__title {
      font-size: $titleSize;
      @extend %line40;
    }
    .el-dialog__headerbtn {
      top: 12px;
    }
  }
}
</style>